import { visualConfig,  } from '@editor/editor.config'
import { createNamespace } from '@utils/index'
import { menuBlockDraggerMixin } from '@mixins/menuBlockDragger'
import { createNewBlock } from '@utils/editor-config'

import './index.scss'

const [bem] = createNamespace('base-comp');

const baseComponentsList = visualConfig.componentModules.base.map(item => createNewBlock(item))

export default {
    name: 'BaseComp',
    label: '基本组件',
    order: 1,
    icon: 'el-icon-edit',
    mixins: [menuBlockDraggerMixin(),],
    data() {
        return {
        }
    },
    render(h) {
        console.log(baseComponentsList, 'baseComponentsList')
        return (
            <div class={bem('list-group')}>
                {
                    baseComponentsList.map(component => {
                        console.log(component, 'xxx')
                        return <div
                            draggable
                            class={bem('group-item')}
                            data-label={component.label}
                            onDragstart={e => this.mDragstart(e, component)}
                            onDragend={e => this.mDragend(e)}
                        >
                            {
                                h(component.componentKey, {props: component.props})
                            }
                        </div>
                    })
                }
            </div>
        )
    }
}